<template>
  <div>
  <el-dialog :title="'测评票统计'" :fullscreen='true' :close-on-click-modal="false" :visible.sync="summary3Data.visible" width="100%">
    <div class="fontDa fontDaTwo" v-loading.fullscreen.lock="fullscreenLoading3">
      <div class="customTableHeader">
        <div style="text-align:right; margin-bottom: 10px;">
          <el-button type="primary" @click="detailBtn">综合得分明细</el-button>
          <el-button type="primary" @click="exportExcel(cppName+'_会议')">导出统计表</el-button>
        </div>
        <!-- <div class="customTableTitle">{{ cppName }}</div> -->
      </div>
      <div class="" id="one">
        <div class="customTableHeader headers">
          <div class="customTableTitle"><tr><td>{{ cppName }}</td></tr></div>
        </div>

        <el-table :data="tableData" :span-method="objectSpanMethod">
          <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
          <el-table-column v-for="(col,ele ) in colShowAll" :key="ele+'eee'" :prop="col.prop" :label="col.label" v-if="!col.hidden" min-width="100" align="center"></el-table-column>
          <el-table-column label="票数统计" align="center" min-width="300">
              <el-table-column v-for="(gz,j) in tableColumn" :key="j+'uuu'" :label="gz.label" :prop="gz.prop" align="center" :fzIndex="j" min-width="100">
              </el-table-column>
          </el-table-column>
        </el-table>
        <div v-for="(item,index) in questionList" :key="index+'vvv'" id="ql">
          <el-table :span-method="objectSpanMethod" :data="item.answer" ref="report-table" border>
             <el-table-column type="index"  label="序号" width="70"  align="center"></el-table-column>
             <el-table-column  :label="item.title" prop="answer" align="left"></el-table-column>
          </el-table>
          </div>
        </div>
      </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      append-to-body
      :fullscreen='true'
      :close-on-click-modal="false"
      width="100%">
      <div class="fontDa fontDaTwo">
        <div class="customTableHeader">
          <div style="text-align:right; margin-bottom: 10px;">
            <el-button type="primary" style="margin-bottom: 20px;text-align: right;" @click="exportExcelDetail(cppName+'明细')">导出</el-button>
          </div>
        </div>
        <div id="details">
          <div class="cpTable one" style="margin-bottom:40px;" id="detail">
            <div class="customTableHeader headers">
              <div class="customTableTitle h_title"> <tr><td>{{ cppName }}</td></tr></div>
            </div>
            <el-table :data="tableData2" :span-method="objectSpanMethod">
              <el-table-column type="index" label="序号"  width="70"  align="center">
              </el-table-column>
              <el-table-column v-for="(col,k) in colShowAll" :key="k+'iii'" :prop="col.prop" :label="col.label"  width="100"></el-table-column>
              <el-table-column label="票数统计" align="center" min-width="300">
                <el-table-column :prop="col.prop" :label="col.label" v-for="(col,h) in groupTitle" :key="h+'ooo'" align="center" >
                  <el-table-column v-for="(colChild,index2) in col.child" :prop="colChild.prop" :label="colChild.label" :key="index2+'www'" align="center" min-width="140">
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div class="dc">
            <el-button type="primary" @click="dialogVisible = false" style="text-align: right;">关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
  </div>
</template>

<script>
import { getData4P3} from '@/api/ceping/cepinghzglb'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    props:{
        summary3Data:{},
    },
  data() {
    return {
      cppName:"",
      params:{
          hdId:"",
          cppId:""
      },
      tableColumn: [],
      tableColumnDetail:[],
      tableData: [],
      tableDataDetail:[],
      colShowAll:[],
      questionList:[],
      tableData2:[],
      groupTitle:[],
      dialogVisible:false,
      fullscreenLoading3:false
    }
  },
  watch:{
    summary3Data:{
        handler(newVal,oldVal){
            if(newVal.visible){
              this.params.hdId = newVal.hdId;
              this.params.cppId = newVal.cppId;
              this.tableData2=[]
              this.getListone()
            }
        },
        deep:true,
        immediate:true,
    },
  },
  methods: {
    detailBtn(){
      this.dialogVisible = true
    },
    exportExcel(excelName) {
      try {
        const ql = document.getElementById('one')
        const $e = ql
        let $table = ql

        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {raw: true})
        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        FileSaver.saveAs(
          new Blob([wbout], {type: 'application/octet-stream'}),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    exportExcelDetail(excelName){
       try {
        const ql = document.getElementById('details')
        const $e = ql
        let $table = ql

        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {raw: true})
        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        FileSaver.saveAs(
          new Blob([wbout], {type: 'application/octet-stream'}),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    getListone(){
      this.fullscreenLoading3 = true;
      getData4P3(this.params).then((response)=>{
        this.tableData = response.data.data.userXzValue;
        this.colShowAll = response.data.data.userTitle;
        this.tableColumn = response.data.data.xzTitle;
        this.questionList = response.data.data.wdList;
        this.cppName = response.data.data.title;
        this.cppNames = response.data.data.title +"明细";
        this.tableDataDetail = response.data.data.group;
        this.groupTitle = response.data.data.group[0].groupTitle;
        this.tableDataDetail.forEach(item=>{
          this.tableData2.push(item.groupValue)
        })
        this.fullscreenLoading3 = false;
      })

    },

    objectSpanMethod({row, column, rowIndex, columnIndex}) {

    },

  }
}
</script>

<style>
.h_dw_time{
  display: flex;
  justify-content: space-between;
}
.fontDaTwo .el-table{
  font-size:16px !important;
}
.h_title{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 2;
}
.fontDaTwo .cpTable .el-table .cell {
  text-align: center !important;
}
.dc{
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.headers{
  display: flex;
  justify-content: center;
}
</style>

